//定义变量
var w = 80;
var h = 24;
var fontsize = h - 6;
var str = "0123456789abcdefABCDEF";

//随机生成最大值不超过max的整数
function randInt(max) {
    return Math.floor(Math.random() * 100000 % max);
    //random生成0~1之间的随机数
}

//生成随机长度的字符串验证码
function randCode(len) {
    //字符串长度
    if (len < 4) {
        len = 4;
    }
    var code = "";
    for (var i = 0; i < len; i++) {
        code += str.charAt(randInt(str.length));
    }
    return code;
}

//生成随机颜色
function randColor() {
    var r = randInt(256);
    var g = randInt(256);
    var b = randInt(256);
    return "rgb(" + r + "," + g + "," + b + ")";
}

//绘制图片
function drawcode(canvas) {
    var valicode = randCode(4);
    w = 5 + fontsize * valicode.length;

    if (canvas != null && canvas.getContext && canvas.getContext("2d")) {
        //canvas.getContext()在画布上返回一个绘图上下文
        // “2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。

        //设置显示区域
        canvas.style.width = w;
        //设置画板
        canvas.setAttribute("width", w);
        canvas.setAttribute("height", h);
        //设置画笔
        var pen = canvas.getContext("2d");
        //绘制背景
        pen.fillStyle = "rgb(255, 255, 255)";//fillStyle设置或返回用于填充绘画的颜色、渐变或模式
        pen.fillRect(0, 0, w, h);         //fillRect()绘制“被填充”的矩形
        //设置水平线位置
        pen.textBaseline = "top";
        //绘制内容
        for (var i = 0; i < valicode.length; i++) {
            pen.fillStyle = randColor();
            pen.font = "bold " + (fontsize + randInt(3)) + "px 微软雅黑";
            pen.fillText(valicode.charAt(i), 5 + fontsize * i, randInt(5));
        }
        //绘制噪音线
        for (var j = 0; j < 2; j++) {
            pen.moveTo(randInt(w) / 2, randInt(h));//设置起点，moveTo()把路径移动到画布中的指定点，不创建线条
            pen.lineTo(randInt(w), randInt(h));//设置终点，lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条
            pen.strokeStyle = randColor();  //笔触颜色，strokeStyle设置或返回用于笔触的颜色、渐变或模式
            pen.lineWidth = 2;//线条粗细
            pen.stroke();//stroke()，绘制已定义的路径
        }
        return valicode;
    }
}

var valicode1 = '';
valicode2 = '';
function changeCode() {
    var cvs1 = document.getElementById("cvs1"),
        cvs2 = document.getElementById("cvs2");
    valicode1 = drawcode(cvs1);
    valicode2 = drawcode(cvs2);
}

function valiCode() {
    var code = document.getElementById("inCode").value;//得到用户输入的值
    if (code.toLowerCase() === valicode.toLowerCase()) {
        // document.getElementById("res").innerHTML = "验证通过";
        alert("验证通过");
        return true;
    } else {
        // document.getElementById("res").innerHTML = "输入的验证码错误";
        alert("验证不通过");
        changeCode();
        return false;
    }
}

$(document).ready(function () {
    changeCode();
    document.getElementById("cvs1").addEventListener("click",function(e){
        e.stopPropagation();
        changeCode();
    });
    document.getElementById("cvs2").addEventListener("click",function(e){
        e.stopPropagation();
        changeCode();
    });
})






function checkUsername(username) {
    if (username === null || username === '' || username.length === 0) {
        return '用户名不能为空';
    }
    if (username.length <= 5) {
        return '用户名长度必须大于5';
    }
    return '';
}

/*$(function() {});是$(document).ready(function(){ })的简写*/
$(function () {
    $('#account-tips').hide();
    $('#password-tip1').hide();
    $('#password-tip2').hide();
    $('#password-tip3').hide();

    $('#user-password2').hide();
    $('#user-passwordConfirm2').hide();
    $('#user-vcode1').hide();
    $('#user-vcode2').hide();
    // $('.feedback').each(function(){
    //     this.hide();
    // });

    /*注册时的用户名合法性检测1-用户名不能为空*/
    $('#input-account2').on('blur', function () {
        //隐藏tips
        $('#account-tips').hide();

        var username = $(this).val();
        var validateMsg = checkUsername(username);
        //验证用户名是否存在
        if (validateMsg === '') {
            $('#user-account2').text('');
            $.ajax({
                type: 'GET',
                url: 'http://localhost:8080/try_war_exploded/usernameIsExist?username=' + username,
                success: function (data) {
                    if (data === 'Exist') {
                        $('#user-account2').text('用户名已存在');
                    }
                },
                error: function (errorMsg) {
                    console.log(errorMsg);
                }
            });
        } else {
            $('#user-account2').text(validateMsg);
        }
    });

    /*注册时当用户准备输入用户名时focus on 用户名*/
    $('#input-account2').on('focus', function () {
        //显示tips
        $('#account-tips').show();
    });

    /*注册时当用户正在输入用户名*/
    $('#input-account2').on('input', function () {
        //检测用户名是否符合要求
        var username = $(this).val();
        if (username.length > 5) {
            $('#account-tips').addClass('true-image');
        } else {
            $('#account-tips').removeClass('true-image');
        }
    });

    /*注册时密码的合法性检测*/
    $('#input-password2').on('blur', function () {
        //隐藏tips
        $('#password-tip1').hide();
        $('#password-tip2').hide();
        $('#password-tip3').hide();

        if($('#password-tip1').hasClass('true-image') &&
            $('#password-tip2').hasClass('true-image') &&
            $('#password-tip3').hasClass('true-image')){
            $('#user-password2').hide();
        }else{
            $('#user-password2').show();
        }
    });

    /*注册时当用户准备输入密码时focus on 密码*/
    $('#input-password2').on('focus', function () {
        //显示tips
        $('#password-tip1').show();
        $('#password-tip2').show();
        $('#password-tip3').show();
    });

    $('#input-password2').on('input', function () {
        var password = $(this).val(),
            length   = password.length,
            typenum  = (function(){
                var num     = 0,
                    type1   = false,
                    type2   = false,
                    type3   = false;
                for (var i = 0; i<length; i++) {
                    var asc = password.charAt(i);
                    if ((asc >= 'A' && asc <= 'Z' || asc >= 'a' && asc <= 'z')) {
                        type1 = true;
                    }else if (i>=0 && i<=9) {
                        type2 = true;
                    }else{
                        if(i !== ' '){
                            type3 = true;
                        }
                    }
                }
                if(type1 === true){
                    num++;
                }
                if(type2 === true){
                    num++;
                }
                if(type3 === true){
                    num++;
                }
                return num;
            })();
        if(!password.includes(' ')){
            $('#password-tip1').addClass('true-image');
        }else{
            $('#password-tip1').removeClass('true-image');
        }
        if(length>=8 && length<=16){
            $('#password-tip2').addClass('true-image');
        }else{
            $('#password-tip2').removeClass('true-image');
        }
        if(typenum>=2){
            $('#password-tip3').addClass('true-image');
        }else{
            $('#password-tip3').removeClass('true-image');
        }
    });

    /*用户输入确认的密码后*/
    $('#input-passwordConfirm2').on('blur', function () {
        if($('#input-password2').val() !=='' && $('#input-password2').val() !== $('#input-passwordConfirm2').val()){
            $('#user-passwordConfirm2').show();
        }else{
            $('#user-passwordConfirm2').hide();
        }
    });

    /*用户点击登录时验证码的校验*/
    $('#loginBtn').on('click',function (){
        var userinput = $('#input-vcode1').val().toLowerCase(),
            checkcode = valicode1.toLowerCase();
        if(userinput === ''){
            $('#user-vcode1').show();
            $('#user-vcode1').text('请输入验证码');
            return false;
        }else if(userinput === checkcode){
            $('#login-form').submit();
        }else {
            $('#user-vcode1').show();
            $('#user-vcode1').text('验证码错误');
            return false;
        }
    });

    /*用户点击注册时验证码的校验*/
    $('#registerBtn').on('click',function (){
        var userinput = $('#input-vcode2').val().toLowerCase(),
            checkcode = valicode2.toLowerCase();
        if(userinput === ''){
            $('#user-vcode2').show();
            $('#user-vcode2').text('请输入验证码');
            return false;
        }else if(userinput === checkcode){
            $('#register-form').submit();
        }else {
            $('#user-vcode2').show();
            $('#user-vcode2').text('验证码错误');
            return false;
        }
    });
});